<template>
    <div>
        <el-container>
            <el-header class="inside-header">
                <div>
                    <!-- 面包屑 -->
                    <el-breadcrumb separator=">">
                        <el-breadcrumb-item>企业环保</el-breadcrumb-item>
                        <el-breadcrumb-item>供应商管理</el-breadcrumb-item>
                        <el-breadcrumb-item class="breadcrumbColor">供应商合同管理</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            </el-header>
            <el-main>
                <div class="inside-main-box">
                    <el-row class="inside-main" style="background: #fff;padding-top: 10px;height: 46px;">
                        <el-col :span="8" style="margin-left: 20px;">
                            <el-form-item label="合同名称" size="small">
                                <el-input placeholder="请输入文件名称" v-model="form.contract_name" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" style="margin-left: 5px;">
                    <el-form-item label="供应商名称" size="small">
                  <el-select v-model="form.supplier_name" clearable  style="width:300px" placeholder="请选择">
                      <el-option v-for="item in kr_control.list.SupplierNameData" :key="item.supplier" :label="item.supplier_name" :value="item.supplier_name" />
                  </el-select>
                    </el-form-item>
                        </el-col>
                        <el-col :span="8" style="margin-left: 20px;">
                            <el-button size="small" class="sele-but" icon="search" @click="selectQuery">查询</el-button>
                             <el-button size="small" class="empty-but" icon="refresh" @click="reset()">重置</el-button>
                            <el-button size="small" icon="plus" class="add-but" @click="addDialog = true">新增</el-button>
                        </el-col>
                    </el-row>
                </div>
                <div style="background: #fff;">
                    <el-table :data="tableData" style="width: 100%;">
                        <el-table-column align="center" prop="id" label="序号" width="80" />
                        <el-table-column align="center" prop="contract_name" label="合同名称" />
                        <el-table-column align="center" prop="supplier_name" label="供应商名称" />
                        <el-table-column align="center" prop="contract_no" label="合同编号" />
                        <el-table-column align="center" prop="service_category" label="服务类别" />
                        <el-table-column align="center" prop="signer" label="合同签署人" />
                        <el-table-column align="center" prop="acceptance_expert" label="验收专家" />
                        <el-table-column align="center" prop="acceptance_member" label="验收成员" />
                        <el-table-column align="center" prop="acceptance_time" label="验收时间"
                         :formatter="function(row,column){  return $moment(row.acceptance_time).format('YYYY-MM-DD')}"/>
                        <el-table-column align="center" prop="contract_execution_time" label="合同执行时间"
                         :formatter="function(row,column){  return $moment(row.contract_execution_time).format('YYYY-MM-DD')}"/>
                        <el-table-column align="center" prop="service_time" label="服务时间"
                         :formatter="function(row,column){  return $moment(row.service_time).format('YYYY-MM-DD')}"/>
                        <el-table-column align="center" fixed="right" label="操作" width="120">
                            <template #default="scope">
                                <el-button link type="primary" icon="edit" size="small" @click="updateDetail(scope.row)">修改</el-button>
                                <el-button link type="danger" icon="delete" size="small" @click="deleteRow(scope.row.id)">删除</el-button>
                            </template>
</el-table-column>
</el-table>
<el-pagination style="margin-top: 20%;display: flex;justify-content: flex-end;" v-model:current-page="currentPage3" v-model:page-size="pageSize3" :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper" :total="1000"
    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</div>
</el-main>
</el-container>
<!-- 新增弹窗 -->
<el-dialog v-model="addDialog" title="新增分类" width="40%">
    <div style="width:100%;display:flex">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="150px" class="demo-ruleForm">
           <el-form-item label="合同名称" prop="contract_name">
                <el-input v-model="ruleForm.contract_name" style="width:300px" placeholder="请输入" />
           </el-form-item>
            <el-form-item label="供应商名称" prop="supplier_name">
                  <el-select v-model="ruleForm.supplier_name" clearable  style="width:300px" placeholder="请选择">
                      <el-option v-for="item in kr_control.list.SupplierNameData" :key="item.supplier_name" :label="item.supplier_name|| ''" :value="item.supplier_name|| ''" />
                  </el-select>
           </el-form-item>
            <el-form-item label="合同编号" prop="contract_no">
                <el-input v-model="ruleForm.contract_no" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="合同签署人" prop="signer">
                <el-input v-model="ruleForm.signer" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="验收专家" prop="acceptance_expert">
                <el-input v-model="ruleForm.acceptance_expert" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="验收成员" prop="acceptance_member">
                <el-input v-model="ruleForm.acceptance_member" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="验收时间" prop="acceptance_time">
                <el-date-picker v-model="ruleForm.acceptance_time" style="width:300px" type="date" placeholder="请选择" :size="size"/>
           </el-form-item>
           <el-form-item label="合同执行时间" prop="contract_execution_time">
                <el-date-picker v-model="ruleForm.contract_execution_time" style="width:300px" type="date" placeholder="请选择" :size="size"/>
           </el-form-item>
      <!--    <el-form-item label="服务时间" prop="service_time" style="justify-content: space-between">
                   <el-date-picker v-model="ruleForm.service_time" style="width:200px"  type="date" placeholder="请选择开始时间" />
                   <span style="margin:5px">至</span>
                    <el-date-picker v-model="ruleForm.service_time"  type="date" style="width:200px" placeholder="请选择结束时间"/>
           </el-form-item>-->
           <el-form-item label="服务类别" prop="service_category">
                <el-input v-model="ruleForm.service_category" maxlength="500" placeholder="请输入" show-word-limit type="textarea" />
           </el-form-item>
        </el-form>
    </div>
    <template #footer>
                <span class="dialog-footer">
                    <el-button class="sele-but" @click="insert">
                        确定
                    </el-button>
                    <el-button class="empty-but" @click="addDialog = false">取消</el-button>

                </span>
            </template>
</el-dialog>
<!-- 修改弹窗 -->
<el-dialog v-model="updateDialog" title="新增分类" width="40%">
    <div style="width:80%">
        <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="150px" class="demo-ruleForm">
           <el-form-item label="合同名称" prop="contract_name">
                <el-input v-model="obj.contract_name" style="width:300px" placeholder="请输入" />
           </el-form-item>
            <el-form-item label="供应商名称" prop="supplier_name">
                  <el-select v-model="obj.supplier_name" clearable  style="width:300px" placeholder="请选择">
                      <el-option v-for="item in kr_control.list.SupplierNameData" :key="item.supplier_name" :label="item.supplier_name" :value="item.supplier_name" />
                  </el-select>
           </el-form-item>
            <el-form-item label="合同编号" prop="contract_no">
                <el-input v-model="obj.contract_no" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="合同签署人" prop="signer">
                <el-input v-model="obj.signer" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="验收专家" prop="acceptance_expert">
                <el-input v-model="obj.acceptance_expert" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="验收成员" prop="acceptance_member">
                <el-input v-model="obj.acceptance_member" style="width:300px" placeholder="请输入" />
           </el-form-item>
           <el-form-item label="验收时间" prop="acceptance_time">
                <el-date-picker v-model="obj.acceptance_time" style="width:300px" type="date" placeholder="请选择" :size="size"/>
           </el-form-item>
           <el-form-item label="合同执行时间" prop="contract_execution_time">
                <el-date-picker v-model="obj.contract_execution_time" style="width:300px" type="date" placeholder="请选择" :size="size"/>
           </el-form-item>
   <!--       <el-form-item label="服务时间" prop="service_time">
                <el-date-picker v-model="obj.service_time" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :size="size"/>
           </el-form-item>-->
           <el-form-item label="服务类别" prop="service_category">
                <el-input v-model="obj.service_category" maxlength="500" placeholder="请输入" show-word-limit type="textarea" />
           </el-form-item>
        </el-form>
    </div>
    <template #footer>
                <span class="dialog-footer">
                    <el-button class="sele-but" @click="update(obj)">确定</el-button>
                    <el-button class="empty-but" @click="addDialog = false">取消</el-button>
                </span>
            </template>
</el-dialog>
</div>
</template>

<script setup>
import {reactive, ref, onMounted} from 'vue'
    import {  Plus } from "@element-plus/icons-vue";
    import {selectAllSupplierList,insertSupplierContract,updateSupplierContract,deleteSupplierContract,selectAllSupplierContract} from "@/api/entPersonManage"
    // 路由
    import { useRouter} from 'vue-router'
import {FormInstance, FormRules, ElMessageBox, ElMessage} from 'element-plus'
import moment from "moment";
const router = useRouter()

onMounted(()=>{
  selectAll()
  selectSupplierNameData()
})
    //重置
const reset = () => {
  form.contract_name = ""
  form.supplier_name = ""
  selectAll()
  selectSupplierNameData()
}
    //查询全部
const selectAll = () => {
  selectAllSupplierContract({}).then((res)=>{
    tableData.value = res.data
  })
}
//根据条件查询
const selectQuery = () => {
  selectAllSupplierContract(form).then((res)=>{
    tableData.value = res.data
  })
}

// 表格假数据
const tableData = ref([])
const form = reactive({})
//供应商列表查询接口
let kr_control = reactive({
  list:{
    SupplierNameData:[]
  },
})


let SupplierNameData = reactive([])
const selectSupplierNameData = () => {
  selectAllSupplierList({}).then((res)=>{
    // SupplierNameData = res.data
    kr_control.list.SupplierNameData = res.data
  })
}
    // 新增弹窗
    const ruleForm = reactive({})
    const addDialog = ref(false)
    const rules = {
        username: [{
            required: true,
            message: "请输入分类名称",
            trigger: "blur",
        }]
    };
const insert = () => {
  console.log(ruleForm,'ruleFormruleFormruleForm')
  insertSupplierContract(ruleForm).then((res)=>{
    if(res.code ==200){
      ElMessage.success("新增成功")
      selectAll()
      addDialog.value = false
    }else {
      ElMessage.error("新增失败")
    }
  })
}
//删除
const deleteRow = (index) => {
  ElMessageBox.confirm("确定要删除吗?").then(()=>{
    deleteSupplierContract({id:index}).then((res)=>{
      selectAll()
    })
  })
}
//修改
const updateDialog = ref(false)
let obj = reactive({
  id:"",
  contract_name:"",
  supplier_name:"",
  contract_no:"",
  service_category:"",
  signer:"",
  acceptance_expert:"",
  acceptance_member:"",
  acceptance_time:"",
  contract_execution_time:"",
  service_time:"",
})
const updateDetail = (row) => {
  updateDialog.value = true
  obj.id = row.id
  obj.contract_name = row.contract_name
  obj.supplier_name = row.supplier_name
  obj.contract_no = row.contract_no
  obj.service_category = row.service_category
  obj.signer = row.signer
  obj.acceptance_expert = row.acceptance_expert
  obj.acceptance_member = row.acceptance_member
  obj.acceptance_time = row.acceptance_time
  obj.contract_execution_time = row.contract_execution_time
  obj.service_time = row.service_time
}
const update = (row) => {
  updateSupplierContract(row).then((res)=>{
    if(res.code ==200){
      ElMessage.success("修改成功")
      selectAll()
      updateDialog.value = false
    }else {
      ElMessage.error("修改失败")
    }
  })
}
</script>
<style scoped>
    /* 面包屑字体颜色更改 */

    .breadcrumbColor>>>.el-breadcrumb__inner {
        color: #000;
    }
    /* 内部header */

    .inside-header {
        height: 10px;
        display: flex;
        justify-content: left;
        align-items: center;
    }
    /* 空心按钮样式 */

    .empty-but {
        border: 1px solid #3780b9;
        color: #3780b9;
    }
    /* 实心按钮背景样式 */

    .sele-but {
        background: #3780b9;
        border: 0px;
        border-radius: 2px;
        color: white;
    }

    .add-but {
        background: #dde5fe;
        color: #3780b9;
    }
    /* 分页 */

    .demo-pagination-block {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
</style>
